<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>配置列表</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="/static/super_cmdb/css/font.css">
    <link rel="stylesheet" href="/static/super_cmdb/css/xadmin.css">
    <script type="text/javascript" src="/static/super_cmdb/js/vue.js"></script>

    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
      <style>
          .hide{
            display: none;
          }
      </style>
  </head>

  <body class="layui-anim layui-anim-up">
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">用户列表</a>
        <a>
          <cite>导航元素</cite></a>
      </span>
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="/configcenter/conf_setting_list/" title="刷新">
        <i class="layui-icon" style="line-height:33px">ဂ</i></a>
    </div>
    <div class="x-body">
      <div class="layui-row" style="width: 151px;position: relative"></div>

      <xblock>
          <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>
          <button class="layui-btn" onclick="x_admin_show('添加配置','/configcenter/conf_setting_add/')"><i class="layui-icon"></i>添加</button>
          <button class="layui-btn" onclick="x_admin_show('克隆配置','/configcenter/conf_setting_clone/',900,450)"><i class="layui-icon"></i>克隆配置</button>
          <span class="x-right" style="line-height:40px">共有配置：{{ conf_setting_lists.count }} 个</span>
      </xblock>

    <!-- 遮罩层部分start -->
    <div id="i2" class="hide"></div>
    <!-- 遮罩层部分end -->

    <!-- 弹出框部分start i3 -->
    <div id="i3" class="hide">
        <div style="padding-top: 30px;color: green;font-size: 20px;padding-bottom: 20px;">
            <span>批量停服操作</span>
        </div>
        <div class="layui-form-item">
              <label for="auth_type" class="layui-form-label" style="width: 120px">
                  <span class="x-red">*</span>选择执行认证方式
              </label>
              <div class="layui-input-inline">
                  <select id="auth_type3" name="auth_type3" style="height: 38px">
                        {% for auth_type in auth_type_list %}
                            <option value="{{ auth_type.auth_type }}">{{ auth_type.auth_type }}</option>
                        {% endfor %}
                  </select>
              </div>
        </div>
        <div class="layui-form-item">
              <label for="login_user" class="layui-form-label" style="width: 120px">
                  <span class="x-red">*</span>用户
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="login_user3" name="login_user3" required="" lay-verify="login_user" value="root"
                  autocomplete="off" class="layui-input">
              </div>
       </div>
        <div class="layui-form-item">
              <label for="password" class="layui-form-label" style="width: 120px">
                  <span class="x-red">*</span>密码
              </label>
              <div class="layui-input-inline">
                  <input type="password" id="password3" name="password3" required="" lay-verify="password" value=""
                  autocomplete="off" class="layui-input">
              </div>
       </div>
        <button class="layui-btn" onclick="StopAll()">开始停服</button>
        <button class="layui-btn" onclick="add_hide_i3()">取消</button>
    </div>
    <!-- 弹出框部分end i3-->

      <table class="layui-table" id='table1'>
        <thead>
          <tr>
            <th>
            <div class="layui-unselect header layui-form-checkbox" lay-skin="primary"><i class="layui-icon">&#xe605;</i></div>
            </th>
            <th>ID</th>
            <th>server_id</th>
            <th>配置名称</th>
            <th>配置内容</th>
            <th>所属项目</th>
            <th>创建时间</th>
            <th>更新时间</th>
            <th>编辑</th>
          </tr>
        </thead>
        <tbody>
            {% for conf_setting in conf_setting_lists %}
              <tr>
                <td>
                <div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id='{{ conf_setting.id }}'><i class="layui-icon">&#xe605;</i></div>
                </td>
                <td>{{ conf_setting.id }}</td>
                <td>{{ conf_setting.server_id }}</td>
                <td>{{ conf_setting.setting_name }}</td>
                <td>
                    <a title="查看详情" style="color: green;"  onclick="x_admin_show('查看详情','/configcenter/conf_setting_detail-{{ conf_setting.id }}')" href="javascript:;">查看详情</a>
                </td>
                <td>{{ conf_setting.b_project }}</td>
                <td>{{ conf_setting.create_time|date:"Y-m-d H:i:s" }}</td>
                <td>{{ conf_setting.update_time|date:"Y-m-d H:i:s" }}</td>
                <td class="td-manage">
                    <a title="编辑"  onclick="x_admin_show('编辑','/configcenter/conf_setting_edit-{{ conf_setting.id }}')" href="javascript:;">
                        <i class="layui-icon">&#xe642;</i>
                    </a>
                </td>
              </tr>
            {% endfor %}
        </tbody>
      </table>

        <div class="page">
            {% for page_str in page_list %}
                {{ page_str|safe }}
            {% endfor %}
        </div>

    </div>
    <script type="text/javascript" src="/static/super_cmdb/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/super_cmdb/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/super_cmdb/js/xadmin.js"></script>
    <script src="/static/super_cmdb/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/static/super_cmdb/js/jquery.cookie.js"></script>
    <script>
        new Vue({
            el: "#ta",
            data: {
                content: "+",
                show: false,
            },
            methods: {      //函数定义属性
                showClick: function () {
                    this.show = !this.show;
                    this.str = "-"
                },
            }
        });

        //表格选中着色
        var trs = document.getElementById('table1').getElementsByTagName('tr');
        window.onload = function(){
            for( var i=0; i<trs.length; i++ ){
                trs[i].onmousedown = function(){
                    tronmousedown(this);
                }
            }
        };
        function tronmousedown(obj){
            for( var o=0; o<trs.length; o++ ){
                if( trs[o] == obj ){
                    trs[o].style.backgroundColor = 'rgb(174, 212, 234)';
                }
                else{
                    trs[o].style.backgroundColor = '';
                }
            }
        }

        //去除遮罩层i3
        function remove_hide_i3() {
        document.getElementById("i2").classList.remove("hide");
        document.getElementById("i3").classList.remove("hide");
        }
        //添加遮罩层i3
        function add_hide_i3() {
            document.getElementById("i2").classList.add("hide");
            document.getElementById("i3").classList.add("hide");
        }

        //添加csrftoken
        $(function () {
            $.ajaxSetup({
                beforeSend:function (xhr,settings) {
                    xhr.setRequestHeader("X-CSRFtoken",$.cookie("csrftoken"));
                }
            })
        });

        //分页
        $(function () {
           var v = $.cookie("per_page_count");
           console.log(v)
           $("#pg").val(v);
        });
        function changePageSize(ths) {
            var current_page = $(ths).val();
            console.log(current_page);
            $.cookie("per_page_count", current_page);
            location.reload();
        }


          layui.use('laydate', function(){
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
              elem: '#start' //指定元素
            });

            //执行一个laydate实例
            laydate.render({
              elem: '#end' //指定元素
            });
          });

          function delAll (argument) {

            var data = tableCheck.getData();

            layer.confirm('确认要删除选中项吗？'+data,function(index){
                //捉到所有被选中的，发异步进行删除
                var url = "/configcenter/conf_setting_del/";
                  $.ajax({
                        url: url,
                        type: "POST",
                        //data: $('#layui-form').serialize(),
                        data: {"conf_setting_id":JSON.stringify(data)}, //将data转换成字符串才能提交到后端
                        success: function (data) {
                            if (data.code == 0) {
                              layer.alert(data.msg, {icon: 6});
                              $(".layui-form-checked").not('.header').parents('tr').remove();
                            } else {
                              layer.alert(data.msg, {icon: 7});
                            }
                        }
                    });
            });
          }

        function submitForm(){
            //获取form表单对象,提交选择项目
            var form = document.getElementById("myform");
            form.submit();//form表单提交
        }
        function submitForm_gameserver_filter(){
            //获取form表单对象,提交选择项目
            var form = document.getElementById("gameserver_filter");
            form.submit();//form表单提交
        }

    </script>
  </body>

</html>
